<!-- 用户动态 -->
<template>
	<view class="container">
		<scroll-view scroll-y style="height:calc(100vh - 10px);" @scrolltolower='scrolltolower'>
			<view class="" style="padding: 0 10px;">
				<custom-waterfalls-flow ref="waterfallsFlowRef" :value="typelist" :column="2" imageKey='headImages'
					:columnSpace="1.5" :seat="2" @wapperClick="messagedetail" @imageClick="messagedetail">
					<view class="one_class" v-for="(item,index) in typelist" :key="index" slot="slot{{index}}">
						<view class="info">
							<view class="info_label">
								<view class="two__item">
									{{item.dynamicType==1?'房屋租赁':''}}
									{{item.dynamicType==3?'公司招聘':''}}
									{{item.dynamicType==2?'个人简历':''}}
									{{item.dynamicType==4?'我有好货':''}}
									{{item.dynamicType==6?'社区服务':''}}
									{{item.dynamicType==7?'社区团购':''}}
									{{item.dynamicType==8?'社区公益':''}}
									{{item.dynamicType==9?'教育服务':''}}
									{{item.dynamicType==10?'养老服务':''}}
								</view>
								<!-- <view class="two__item" v-for="obj in item.shoplist" :key="obj.index">
									{{obj}}
								</view> -->
							</view>
							<view class="">
								{{item.topic ? (item.topic.length>8? item.topic.substring(0, 8)  + ".." : item.topic): (item.content.length>8? item.content.substring(0, 8)  + ".." : item.content)}}
							</view>
							<view class="" style="color: #ff5500; font-weight: 600; font-size: 17px;">
								{{item.price?(item.price.length>10? item.price.substring(0,10)  + ".." : item.price):''}}{{ item.salaryType ? (item.salaryType == 1 ? '/天' : (item.salaryType == 2 ? '/月' : (item.salaryType == 3 ? '/年' : ''))) : '' }}
							</view>
							<view class="awatarname">
								<view class="" style="display: flex; align-items: center;">
									<view class="" style="margin-right:5px;">
										<u-avatar :size='20' :src="item.nickUrl" shape="circle"></u-avatar>
									</view>
									<view class="">
										<view class="" style="font-size: 11px; color: #666;">
											{{item.nickName.length>4? item.nickName.substring(0,4)  + ".." : item.nickName}}
										</view>
									</view>
								</view>
								<view class="" style="font-size: 11px; color: #666;">
									{{item.timestr}}
								</view>
							</view>
						</view>
					</view>
				</custom-waterfalls-flow>
			</view>
			<u-loadmore line :status="status" :loading-text="loadingText"
				:nomore-text="nomoreText" />
		</scroll-view>

	</view>
</template>

<script>
	import {
		formatTimeAgo
	} from '../../utils/utils.js'
	import formItem from '../../uni_modules/uview-ui/libs/config/props/formItem';
	export default {
		data() {
			return {
				listtotal:1,
				status: 'loadmore',
				loadingText: '努力加载中',
				nomoreText: '没有更多了',
				typelist: [],
				query: {
					id: '',
					pageNum: 1,
					pageSize: 10,
				},
			};
		},
		mounted() {

		},
		onLoad(options) {
			// 从路由参数中获取传递的值			
			const id = decodeURIComponent(options.id);
			this.query.id = id
			this.userlist()
		},
		components: {},
		methods: {
			scrolltolower() {
				this.query.pageNum++
				this.userlist()
			},
			userlist() {
				const that = this
				this.$request(`/index/listPageByMemberIdId`, 'post', this.query).then(
					res => {
						this.status=res.data.data.list.length==0||res.data.data.total==res.data.data.list.length ?'nomore': 'loading'
						this.listtotal=res.data.data.total
						const dataarr = res.data.data.list.map(item => ({
							...item,
							shoplist: item.labels == null ? [] : item.labels.split(","),
							timestr: formatTimeAgo(item.updateTime)

						}));
						
						that.typelist = that.typelist.concat(dataarr)
					})
			},

			messagedetail(e) {
				const typeUrlMap = {
					1: '/pages/detail/subleasemessage_detail',
					2: '/pages/detail/resumemessage_detail',
					3: '/pages/detail/recruitmessage_detail',
					4: '/pages/detail/marketmessage_detail',
					6: '/pages/detail/communitymessage_detail',
					7: '/pages/detail/buying_detail',
					8: '/pages/detail/activity_detail',
					9: '/pages/detail/education_detail',
					10: '/pages/detail/elderly_detail',

				};

				const url = typeUrlMap[e.dynamicType];
				if (url) {
					uni.navigateTo({
						url: `${url}?typeid=${encodeURIComponent(e.id)}`
					});
				} else {
					console.error('Unknown dynamicType:', e.dynamicType);
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.container {
		padding-top: 10px;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;

		.other_class {
			height: 33px;
			display: flex;
			width: calc(100% - 30px);
			padding: 0px 15px;

			.class_item {
				padding: 0px 10px;
				background-color: #fff;
				font-size: 12px;
				margin-right: 20px;
				height: 25px;
				line-height: 25px;
				display: flex;
				align-items: center;
			}
		}

		.header {
			height: 60px;
			line-height: 60px;
			text-align: center;
			background-color: #f6f6f6;
			width: 100%;
			position: relative;
			z-index: 1;
			transition: top 0.3s;

			/* 添加过渡效果 */
			::v-deep .u-search {
				width: 85%;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);

				.u-search__action {
					width: 60px;
					color: #fff;
					margin: 13px;
					height: 34px;
					line-height: 34px;
					border-radius: 10px;
					background: linear-gradient(to right, #fd790e, #fd9630, #fea54f);
				}

				.u-search__content {
					background-color: #fff !important;

					.u-search__content__input {
						background-color: #fff !important;
					}
				}
			}
		}


		::v-deep .column-value .img {
			max-height: 240px;
			min-height: 100px;
		}

		/* 行之间的间隔 */
		.one_class {
			display: inline-block;
			width: 100%;
			margin-bottom: 10px;
			background-color: #fff;
			border-radius: 10px;
			position: relative;

			::v-deep .u-image__image {
				border-top-left-radius: 10px !important;
				border-top-right-radius: 10px !important;
			}

			.info {
				padding: 8px;

				.title_ma {
					margin-bottom: 5px;

					.mabot {
						font-size: 18px;
						color: #ff0004;
					}
				}

				// .info_label {
				// 	flex-wrap: wrap;
				// 	display: flex;
				// 	align-items: center;
				// 	font-size: 12px;

				// 	.two__item {
				// 		margin-bottom: 5px;
				// 		font-size: 11px;
				// 		padding: 2px 8px;
				// 		margin-right: 3px;
				// 		border-radius: 10px;
				// 		color: #3072f6;
				// 		background-color: #eaf1fd;
				// 	}

				// 	:first-child {
				// 		color: #fff;
				// 		background-color: #3072f6;
				// 	}
				// }
				.info_label {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					font-size: 11px;
					position: absolute;
					background-color: #fbc338;
					top: -20px;
					left: 0px;
					height: 20px;
					padding: 0 5px;
					border-radius: 0 3px 0 0;
					/* 顺序为 top-left top-right bottom-right bottom-left */
					// .two__item {
					// 	margin-bottom: 5px;
					// 	padding: 2px 8px;
					// 	margin-right: 3px;
					// 	border-radius: 10px;
					// 	color: #3072f6;
					// 	background-color: #eaf1fd;
					// }

					// :first-child {
					// 	color: #fff;
					// 	background-color: #3072f6;
					// }
				}

				.awatarname {
					justify-content: space-between;
					margin-top: 5px;
					display: flex;
					align-items: center;
				}
			}
		}
	}
</style>